<template>
  <div
    class="main-table"
    :style="{ height: height.includes('%') ? height : height + 'px' }"
  >
    <!-- 表格内容 -->
    <div :class="{ 'table-con-hasPage': hasPage, 'table-con': !hasPage }">
      <vxe-table
        ref="zzTable"
        :data="data"
        :empty-text="emptyText"
        :loading="loading"
        height="auto"
        :size="size"
        border="inner"
        :stripe="stripe"
        :align="align"
        :header-align="headerAlign"
        :column-config="columnConfig"
        :menu-config="menuConfig"
        :checkbox-config="checkboxConfig"
        :tree-config="treeConfig"
        :edit-config="editConfig"
        :edit-rules="editRules"
        @menu-click="handleMenuClick"
      >
        <slot></slot>
      </vxe-table>
    </div>
    <!-- 表格分页 -->
    <div v-if="hasPage" class="page-right">
      <vxe-pager
        v-model:current-page="tablePage.pageNum"
        v-model:page-size="tablePage.pageSize"
        :total="tablePage.total"
        :pager-count="pagerCount"
        @page-change="handlePageChange"
        :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total',
        ]"
      >
        >
      </vxe-pager>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

// 定义组件名称
defineOptions({
  name: "zzTable",
});

// 定义 props
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
  emptyText: {
    type: String,
    default: "暂无数据",
  },
  size: {
    type: String,
    default: "small",
  },
  loading: {
    type: Boolean,
  },
  stripe: {
    type: Boolean,
    default: false,
  },
  align: {
    type: String,
    default: "center",
  },
  headerAlign: {
    type: String,
    default: "center",
  },
  height: {
    type: String,
    default: "100%",
  },
  hasPage: {
    type: Boolean,
    default: false,
  },
  pagerCount: {
    type: Number,
    default: 7,
  },
  page: {
    type: Object,
    default: {
      pageNum: 1,
      pageSize: 10,
      total: 0,
    },
  },
  checkboxConfig: {
    type: Object,
  },
  columnConfig: {
    type: Object,
    default: {
      resizable: true,
      isHover: true,
      drag: false,
    },
  },
  menuConfig: {
    type: Object,
  },
  treeConfig: {
    type: Object,
  },
  editConfig: {
    type: Object,
  },
  editRules: {
    type: Object,
  },
});

// 定义 emits
const emit = defineEmits(["page-change", "menu-click"]);

// 定义 ref
const zzTable = ref(null);

// 计算属性
const tablePage = computed(() => {
  return props.page;
});

// 方法
const zzTableRef = () => {
  return zzTable.value;
};

const handlePageChange = (page) => {
  emit("page-change", page);
};

const handleMenuClick = ({ menu, row, column }) => {
  emit("menu-click", { menu, row, column });
};

// 获取选中项
const getCheckboxRecords = () => {
  return zzTable.value.getCheckboxRecords();
};

const getTableColumn = () => {
  return zzTable.value.getTableColumn();
};

// 刷新表格
const refreshTable = () => {
  if (zzTable.value) {
    zzTable.value.loadData(props.data);
  }
};

// 暴露方法给父组件
defineExpose({
  zzTableRef,
  getCheckboxRecords,
  getTableColumn,
  refreshTable,
});
</script>

<style lang="less" scoped>
.main-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-con {
    height: calc(100% - 16px);
    &::-webkit-scrollbar {
      height: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--el-scrollbar-color);
      border-radius: 1px;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }

  .table-con-hasPage {
    height: calc(100% - 48px);
    &::-webkit-scrollbar {
      height: 2px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--el-scrollbar-color);
      border-radius: 1px;
    }
    &::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }

  .table-page {
    display: flex;
    background-color: var(--el-bg-color);

    .page-right {
      height: 100%;
    }

    .vxe-pager.size--small {
      height: 100%;
    }
  }
}
</style>
